<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">

      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="年份：">
            <DatePicker type="year" v-model="form1.year" placeholder="请选择" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">

        </Col>
        <Col span="8">
          <Button class="ivu-btn-query" icon="md-search" @click="selects">查询</Button>
        </Col>
      </Row>
    </Form>
    <Row style="margin-top: 20px" :gutter="8">
      <Col span="12">
        <Card dis-hover>
          <Spin fix v-if="groupNumShow">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
          </Spin>
          <div ref="auditForm" style="height: 406px;"></div>
        </Card>
      </Col>
      <Col span="12">
        <Card dis-hover class="card">
          <Spin fix v-if="groupIntersectionShow">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
          </Spin>
          <Tabs style="margin-top: 10px">
            <Tab-pane label="审核综合考评汇总">
              <Row  :gutter="5" class="row-top">
                <Col span="16">投入资金</Col>
                <Col span="8">{{InputData.investment}}(万元)</Col>
              </Row>
              <Row  :gutter="5" class="row-top">
                <Col span="16">节约资金</Col>
                <Col span="8">{{InputData.savingMoney}}(万元)</Col>
              </Row>
              <Row  :gutter="5" class="row-top">
                <Col span="16">节能量</Col>
                <Col span="8">{{InputData.energySaving}}(吨标煤)</Col>
              </Row>
              <Row  :gutter="5" class="row-top">
                <Col span="16">节煤量</Col>
                <Col span="8">{{InputData.coalSaving}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">节电量</Col>
                <Col span="8">{{InputData.powerSaving}}(千瓦时)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">节气量</Col>
                <Col span="8">{{InputData.gasSaving}}(立方米)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">节油量</Col>
                <Col span="8">{{InputData.oilSaving}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">节水量</Col>
                <Col span="8">{{InputData.waterSaving}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">voc减排量</Col>
                <Col span="8">{{InputData.voc}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">粉尘减排量</Col>
                <Col span="8">{{InputData.dust}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">二氧化硫减排量</Col>
                <Col span="8">{{InputData.so}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">氮氧化物减排量</Col>
                <Col span="8">{{InputData.nox}}(吨)</Col>
              </Row>
              <Row :gutter="5" class="row-top">
                <Col span="16">物料损失减排量</Col>
                <Col span="8">{{InputData.materialLoss}}(吨)</Col>
              </Row>

            </Tab-pane>
          </Tabs>
        </Card>
      </Col>
    </Row>


  </Layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';
import cascaderDom from '../../../../components/cascader-dom.vue';
import echarts from 'echarts';
import {formatDate} from "@/tools";

export default {
  components: {cascaderDom},
  name: "riskStatical",
  data() {
    return {
      groupIntersectionShow:false,
      title: '',
      jinyu: [],
      companyList: [],
      date: ['', ''],
      loading: false,
      tableHeight: '',
      form1: {},
      type: '',
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      groupNumShow: false,
      groupGradeShow: false,
      groupGradeColumnShow: false,
      companyId: sessionStorage('userId').getObject('userId').companyId,
      dataTable: [],
      companyAll: [],
      model1: false,
      model2: false,
      buttonDisabled: false,
      InputData: {},
      statistical: {},
      auditForm: [],

    }
  },
  mounted() {
    // this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    // this.query()
    this.form1.year = formatDate(new Date(), "yyyy");
    this.selects();

  },
  methods: {
    selects() {
      this.selectGroupNum();
      this.query();
    },
    selectGroupNum() {
      let _this = this;
      _this.groupNumShow = true;
      let auditForm = echarts.init(this.$refs.auditForm);
      if (this.form1.year) {
        this.form1.year = formatDate(new Date(this.form1.year), "yyyy");
      }
      this.auditForm = [];
      this.$http.get(Api.prdAuditFormStatistics, {params: this.form1}).then((res) => {
        if (res.data.status == '200') {
          _this.auditForm = res.data.data;


        } else if (res.data.status = '202') {
          this.$Message.warning(res.data.msg);

        }
        let auditFormOption = this.getAuditForm();
        auditForm.setOption(auditFormOption);
        window.onresize = auditForm.resize;
        _this.groupNumShow = false;
      }).catch(e => {
        console.log(e)
        this.$Message.error("数据获取失败")
        _this.groupNumShow = false;
      })
    },
    //清洁生产报送单
    getAuditForm() {
      let _this = this;
      let option = {
        title: {
          text: '完成情况统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66', '#16CF52', '#22CA66'],
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '60%',
            data: _this.auditForm
          }
        ]
      };
      return option;
    },


    query(){
      let _this = this;
      _this.groupIntersectionShow = true;
      if (this.form1.year) {
        this.form1.year = formatDate(new Date(this.form1.year), "yyyy");
      }
      this.$http.get(Api.prodAuditFormSumStatistics, {params: this.form1}).then((res) => {
        debugger;
        if (res.data.status == '200') {
          _this.InputData = res.data.data;
        } else if (res.data.status = '202') {
          this.$Message.warning(res.data.msg);
        }
        _this.groupIntersectionShow = false;
      }).catch(e => {

        this.$Message.error("数据获取失败")
        _this.groupIntersectionShow = false;
      })
    }

  }
}
</script>

<style scoped>
@import '../../../../index.css';

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

.border-daiban {
  border-right: 2px dotted #696969
}

.text-daiban {
  font-size: 18px;
  text-align: center;
  color: #696969;
}

.text-daiban-bold {
  font-size: 30px;
  font-weight: bold;
}
.row-top{
  margin-top: 4px;
}
</style>
